@import 'car-font';

.racer-home {
  background-image: img-url('racer/checkered-flag-grey.svg');
  background-size: 200%;
  background-position: center;

  &__buttons {
    @extend %flex-between;
    margin: 4em 0 3em 0;
  }

  form {
    width: 45%;
  }

  .button {
    @extend %flex-column;
    align-items: center;
    font-size: 1.5em;
    padding: 4em 0;
    width: 100%;
    opacity: 0.75;
    overflow: hidden;
    white-space: normal;
    @include transition;
    .car {
      position: relative;
      font-family: 'racer-car';
      font-weight: normal;
      font-size: 9em;
      display: block;
      margin-top: -0.5em;
    }
    &:hover {
      opacity: 1;
      .car {
        transform: translateX(0.1em) scaleX(0.95) skewX(6deg) rotate(-3deg);
        transition: all 0.15s ease-out;
        &::before {
          content: 'A';
          position: absolute;
          left: -0.9em;
          bottom: 0.6em;
          font-size: 0.3em;
          animation: boost 0.1s ease-in infinite;
        }
        @media (prefers-reduced-motion: reduce) {
          &::before {
            animation: none;
            transform: translateX(0%);
            opacity: 1;
          }
        }
      }
    }
  }

  @keyframes boost {
    from {
      transform: translateX(0%);
      opacity: 1;
    }
    to {
      transform: translateX(-3px);
      opacity: 0.6;
    }
  }

  @include breakpoint($mq-not-small) {
    &__buttons {
      display: block;
    }

    form {
      width: 100%;
      margin-bottom: 4em;
    }
  }

  &__about {
    margin: 5em auto 0 auto;
    text-align: center;
  }
}
